import React, { Component } from 'react'
import axios from 'axios'




export default class MapIndex extends Component {
    MP(ak) {
        return new Promise(function (resolve, reject) {
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;
            document.head.appendChild(script)
            window.init = () => {
                resolve(window.BMap)
            }
        })
    }

    componentDidMount() {
        this.MP("844riaICGfTc8nTET4G01BPYu8kGRYXX").then(BMap => {
            var map = new BMap.Map('allmap');            // 创建Map实例
            var point = new BMap.Point(114.338058, 30.542432); // 创建点坐标
            map.centerAndZoom(point, 12);
            map.enableScrollWheelZoom();;               //启用滚轮放大缩小
            var marker = new BMap.Marker(point);//创建标注
            var opts = {
                            anchor: 'bmap_anchor_top_leef',
                            offset: new BMap.Size(150,5)
                        }
            map.addControl(new BMap.NavigationControl(opts));//addControl()向地图添加控件 平移和缩放控件 PC端默认左上角 移动端默认右下角且只有缩放功能
            map.addControl(new BMap.ScaleControl(opts));//比例尺控件 默认左下角
            map.addControl(new BMap.OverviewMapControl(opts));//缩略图控件 默认右下角且呈可折叠状态（点击隐藏和显示）
            map.addControl(new BMap.MapTypeControl());//地图类型控件 默认右上角可切换地图/卫星/三维三种状态
            map.addControl(new BMap.GeolocationControl(opts));//定位控件 默认左下角
            var mapPoints = [
                { x: 30.589972, y: 114.354993,title:"胡玖",con:"我是胡玖",branch:"海底捞" },
                { x: 30.565259, y: 114.342807,title:"罗华丽",con:"我是罗华丽",branch:"海底捞" },
                { x: 30.542432, y: 114.338058,title:"周桐锐",con:"我是周桐锐",branch:"海底捞" },
                { x: 30.583103, y: 114.296981,title:"陈文靓",con:"我是陈文靓",branch:"海底捞" },
                { x: 30.586136, y: 114.275582,title:"蒋丹祎",con:"我是蒋丹祎",branch:"海底捞" },
                { x: 30.5196, y: 114.248427,title:"南博",con:"我是南博",branch:"海底捞" },
                { x: 30.51207, y: 114.412192,title:"刘琦",con:"我是刘琦",branch:"海底捞"},
                { x: 30.496789, y: 114.416663,title:"胡雨露",con:"我是胡雨露",branch:"海底捞" },
                { x: 30.564309, y: 114.214352,title:"陈明",con:"我是陈明",branch:"海底捞" },
                { x: 30.444657, y: 114.441659,title:"舒畅",con:"我是舒畅",branch:"海底捞" },
            ];
            var i = 0;
            map.addOverlay(marker);
            map.enableScrollWheelZoom(true);
            // 函数 创建多个标注
            function markerFun(points,label,infoWindows) {
                var markers = new BMap.Marker(points);
                map.addOverlay(markers);
                markers.setLabel(label);
                markers.addEventListener("click",function (event) {
                    console.log("0001");
                    map.openInfoWindow(infoWindows,points);//参数：窗口、点  根据点击的点出现对应的窗口
                });
            }
            for (; i < mapPoints.length; i++) {
                var points = new BMap.Point(mapPoints[i].y, mapPoints[i].x);//创建坐标点
                var opts = {
                    width:250,
                    height: 100,
                    title:mapPoints[i].title
                };
                var label = new BMap.Label(mapPoints[i].branch,{
                    offset:new BMap.Size(25,5)
                });
                var infoWindows = new BMap.InfoWindow(mapPoints[i].con,opts);
                markerFun(points,label,infoWindows);
            }
        });
    }
    render() {
        return (
            <div id="allmap" style={{ width: "600pxs", height: "446px" }}>

            </div>
        )
    }
}
